<template>
  <div class="paper-preview-container">
    <div class="paper-header">
      <h2 class="paper-title">{{ paper.title }}</h2>
      <div class="paper-info">
        <span>总分：{{ paper.totalScore }}分</span>
        <span v-if="paper.passScore">及格分：{{ paper.passScore }}分</span>
        <span v-if="paper.timeLimit">考试时长：{{ paper.timeLimit }}分钟</span>
      </div>
      <div class="paper-remark" v-if="paper.remark">
        <p>试卷说明：{{ paper.remark }}</p>
      </div>
    </div>

    <!-- 预览选项控制 -->
    <el-card class="preview-options" shadow="never">
      <div slot="header" class="clearfix">
        <span>预览选项</span>
      </div>
      <el-form :inline="true" size="mini">
        <el-form-item label="显示答案">
          <el-switch v-model="previewOptions.showAnswers" active-color="#13ce66"></el-switch>
        </el-form-item>
        <el-form-item label="显示选项答案">
          <el-switch v-model="previewOptions.showOptionAnswers" active-color="#13ce66"></el-switch>
        </el-form-item>
        <el-form-item label="显示解析">
          <el-switch v-model="previewOptions.showAnalysis" active-color="#13ce66"></el-switch>
        </el-form-item>
        <el-form-item label="显示知识点">
          <el-switch v-model="previewOptions.showKnowledgePoints" active-color="#13ce66"></el-switch>
        </el-form-item>
        <el-form-item label="显示难度">
          <el-switch v-model="previewOptions.showDifficulty" active-color="#13ce66"></el-switch>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 按题型分组的题目列表 -->
    <div v-for="(questions, typeName) in paper.questionsByType" :key="typeName" class="question-type-section">
      <h3 class="question-type-title">{{ typeName }}</h3>

      <div v-for="(question, index) in questions" :key="question.id" class="question-item">
        <div class="question-header">
          <span class="question-number">{{ getQuestionNumber(questions, index) }}.</span>
          <span class="question-score">({{ question.score }}分)</span>
          <el-button
            type="text"
            size="mini"
            style="float: right"
            @click="handleEditQuestion(question)"
          >编辑</el-button>
        </div>

        <div class="question-content" v-html="question.title"></div>

        <!-- 题目内容（富文本） -->
<!--        <div class="question-full-content" v-if="question.content" v-html="question.content"></div>-->
        <formula-renderer class="question-full-content" v-if="question.content" :html="question.content" />
        <!-- 选择题选项 -->
        <div v-if="question.options && question.options.length > 0" class="question-options">
          <div v-for="option in question.options" :key="option.id" class="option-item">
            <span class="option-code">{{ option.optionCode }}.</span>
<!--            <span class="option-content" v-html="option.content"></span>-->
            <formula-renderer class="option-content" v-html="option.content" />
            <span v-if="previewOptions.showOptionAnswers && option.isCorrect" class="correct-mark">✓</span>
          </div>
        </div>

        <!-- 答案 -->
        <div v-if="previewOptions.showAnswers && question.answers && question.answers.length > 0" class="question-answers">
          <div class="answer-title">答案：</div>
<!--          <div v-for="answer in question.answers" :key="answer.id" class="answer-item" v-html="answer.content"></div>-->
          <div v-for="answer in question.answers" :key="answer.id" class="answer-item" >
<!--            <span  v-html="answer.content"></span>-->
            <formula-renderer v-html="answer.content" />
          </div>
        </div>

        <!-- 解析 -->
        <div v-if="previewOptions.showAnalysis && question.analysis" class="question-analysis">
          <div class="analysis-title">解析：</div>
<!--          <div class="analysis-content" v-html="question.analysis"></div>-->
          <formula-renderer class="analysis-content" :html="question.analysis" />
        </div>

        <!-- 知识点 -->
        <div v-if="previewOptions.showKnowledgePoints && question.knowledgePoints && question.knowledgePoints.length > 0" class="question-knowledge">
          <div class="knowledge-title">知识点：</div>
          <el-tag
            v-for="point in question.knowledgePoints"
            :key="point"
            size="mini"
            type="info"
            class="knowledge-tag"
          >{{ point }}</el-tag>
        </div>

        <!-- 难度 -->
        <div v-if="previewOptions.showDifficulty && question.difficult" class="question-difficulty">
          <div class="difficulty-title">难度：</div>
          <el-rate
            v-model="question.difficult"
            disabled
            :colors="['#99A9BF', '#F7BA2A', '#FF9900','#ff00bb', '#ff002f']"
          />
        </div>

        <!-- 版本信息 -->
        <div v-if="previewOptions.showVersion" class="question-version">
          <span class="version-text">题目版本：{{ question.questionVersion }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FormulaRenderer from "@/components/FormulaRenderer/index.vue";

export default {
  name: 'PaperPreview',
  components: {FormulaRenderer},
  props: {
    paper: {
      type: Object,
      required: true
    }
  },
  computed: {
    displayPaper() {
      // 确保即使传入的paper对象不完整也有默认值
      return {
        title: this.paper.title || '无标题',
        totalScore: this.paper.totalScore || 0,
        passScore: this.paper.passScore,
        timeLimit: this.paper.timeLimit,
        remark: this.paper.remark,
        questionsByType: this.paper.questionsByType || {}
      }
    }
  },
  data() {
    return {
      previewOptions: {
        showAnswers: true,
        showOptionAnswers: true,
        showAnalysis: true,
        showKnowledgePoints: true,
        showDifficulty: true,
        showVersion: false
      },
      loading: false
    }
  },
  methods: {
    handleEditQuestion(question) {
      this.$emit('edit-question', question)
    },
    getQuestionNumber(questions, index) {
      // 计算题目序号（考虑不同题型）
      let number = index + 1
      const type = questions[index].typeName

      // 如果是第一个题目或者题型变化，重置序号
      if (index === 0 || questions[index - 1].typeName !== type) {
        number = 1
      } else {
        number = this.getQuestionNumber(questions, index - 1) + 1
      }

      return number
    }
  },
  watch: {
    'paper.previewOptions': {
      handler(newVal) {
        if (newVal) {
          this.previewOptions = { ...newVal }
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-preview-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .paper-header {
    margin-bottom: 30px;
    text-align: center;

    .paper-title {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .paper-info {
      margin-bottom: 15px;

      span {
        margin: 0 10px;
        color: #666;
      }
    }

    .paper-remark {
      text-align: left;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }
  }

  .preview-options {
    margin-bottom: 20px;

    ::v-deep .el-card__body {
      padding-bottom: 0;
    }
  }

  .question-type-section {
    margin-bottom: 40px;

    .question-type-title {
      font-size: 18px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
    }
  }

  .question-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;

    &:last-child {
      border-bottom: none;
    }

    .question-header {
      margin-bottom: 15px;

      .question-number {
        font-weight: bold;
        margin-right: 5px;
      }

      .question-score {
        color: #666;
        font-size: 14px;
      }
    }

    .question-content, .question-full-content {
      margin-left: 20px;
      margin-bottom: 15px;
    }

    .question-options {
      margin-left: 40px;
      margin-bottom: 15px;

      .option-item {
        margin-bottom: 8px;

        .option-code {
          font-weight: bold;
          margin-right: 5px;
        }

        .correct-mark {
          color: #67c23a;
          margin-left: 5px;
        }
      }
    }

    .question-answers {
      margin-left: 20px;
      margin-bottom: 15px;
      padding: 10px;
      background-color: #f0f9eb;
      border-radius: 4px;

      .answer-title {
        font-weight: bold;
        margin-bottom: 5px;
      }
    }

    .question-analysis {
      margin-left: 20px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 4px;

      .analysis-title {
        font-weight: bold;
        margin-bottom: 5px;
      }
    }

    .question-knowledge {
      margin-left: 20px;
      margin-bottom: 15px;

      .knowledge-title {
        font-weight: bold;
        margin-bottom: 5px;
      }

      .knowledge-tag {
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }

    .question-difficulty {
      margin-left: 20px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      .difficulty-title {
        font-weight: bold;
        margin-right: 10px;
      }
    }

    .question-version {
      margin-left: 20px;
      font-size: 12px;
      color: #999;
    }
  }
}

// 富文本内容样式
::v-deep .editor-content-view {
  border: 3px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 20px;
  overflow-x: auto;
}

::v-deep .editor-content-view p,
::v-deep .editor-content-view li {
  white-space: pre-wrap;
}

::v-deep .editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

::v-deep .editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

::v-deep .editor-content-view pre>code {
  display: block;
  padding: 10px;
}

::v-deep .editor-content-view table {
  border-collapse: collapse;
}

::v-deep .editor-content-view td,
::v-deep .editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

::v-deep .editor-content-view th {
  background-color: #f1f1f1;
}

::v-deep .editor-content-view ul,
::v-deep .editor-content-view ol {
  padding-left: 20px;
}

::v-deep .editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}

// 数学公式样式
::v-deep .katex {
  font-size: 1em !important;
}
</style>
